<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频聊天</title>
    <script src="webjars/jquery/dist/jquery.min.js"></script>
    <script src="/webjars/webrtc-adapter/release/adapter.js"></script>
    <script src="/webjars/draggabilly/draggabilly.pkgd.js"></script>
      <script src="webjars/demo-console/index.js"></script>
      <script src="./js/kurento-utils.js"></script>
      <script src="./js/one.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      .videoContainer,
      #videoBig {
        width: 100%;
        height: 100%;
      }
      .videoContainer {
        position: relative;
      }
      .democonsole {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 200px;
          border: 1px solid #000;
      }
      #videoOutput,
      #videoInput {
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
      #videoSmall {
        width: 100px;
        height: 140px;
        position: absolute;
        right: 10px;
        top: 10px;
        border: 1px solid #f5f5f5;
      }
    </style>
  </head>
  <body>
    <div class="videoContainer">
        <div id="console" class="democonsole">
            <ul></ul>
        </div>
      <div id="videoBig">
        <video
          id="videoOutput"
          autoplay
          poster="img/webrtc.png"
        ></video>
      </div>
      <div id="videoSmall">
        <span id="link"></span>
        <span id="aa"></span>
        <video
          id="videoInput"
          autoplay
          poster="img/webrtc.png"
        ></video>
      </div>
      <input id="name" name="name" type="hidden" value="king3"/>
      <input id="peer" name="peer" type="hidden" value="biao3" />
    </div>
    <script>
        // window.onload = function() {
        //     setRegisterState(NOT_REGISTERED);
        //     var drag = new Draggabilly(document.getElementById('videoSmall'));
        //     videoInput = document.getElementById('videoInput');
        //     videoOutput = document.getElementById('videoOutput');
        //     // document.getElementById('name').focus();
        //     // 注册
        //     register("king3");
        // }
      window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
        window.flutter_inappwebview.callHandler("handlerFoo").then(function (result) {
            const { name, currentUsername } = result;
            document.getElementById('name').value = currentUsername;
            document.getElementById("link").innerHTML = currentUsername;
            document.getElementById("aa").innerHTML = name;

            window.onload = function() {
                alert("11" + currentUsername);
                setRegisterState(NOT_REGISTERED);
                var drag = new Draggabilly(document.getElementById('videoSmall'));
                videoInput = document.getElementById('videoInput');
                videoOutput = document.getElementById('videoOutput');
                // document.getElementById('name').focus();
                // 注册
                register(currentUsername);
            }
          }
        );
      });
    </script>
  </body>
</html>
